<template>
  <div id="building">
  <div >
    <input type="text" placeholder="请输入股票代码" v-model="kw" @keydown.enter="get_stockinfo();geturl()" />
    <div class="container-sm ">
      <div class="stock-name">{{ stockname }}</div>
      <div class="stock-id">股票代码：{{ stockid }}</div>
      <div class="clearfix"></div>
      <div class="quote-container">
        <div class="stock-info">
          <div class="stock-price ">
            <div v-if="choosecolor(stockprice) == 'red'">
              <div class="stock-current">价格:</div>
              <div class="stock-current red">{{ stockprice }}</div>
            </div>
            <div v-else>
              <div class="stock-current">价格:</div>
              <div class="stock-current green">{{ stockprice }}</div>
            </div>
            <div class="stock-change">{{ zhangdiefudu }} {{ zhangdiebili }}</div>
          </div>
          <el-row>
            <a href="../components/shoucangjia.vue"><el-button type="primary" >添加到收藏夹</el-button></a>
          </el-row>
          <div class="stock-time">
            <div class="quote-market-status"><span>{{ dealingstatus }}</span><br><span>{{ nowTime }} </span></div>
          </div>
        </div>
        <p class="xiangxishuju">详细数据</p>
        <table class="quote-info">
          <tbody>
          <tr>
            <td>最高：<span :style=cc(zuigao)>{{ zuigao }}</span></td>
            <td>今开：<span :style=cc(jinkai)>{{ jinkai }}</span></td>
            <td>涨停：<span :style=cc(zhangting)>{{ zhangting }}</span></td>
            <td>成交量：<span>{{ chengjiaoliang }}</span></td>
          </tr>
          <tr class="separateTop">
            <td>最低：<span :style=cc(zuidi)>{{ zuidi }}</span></td>
            <td>昨收：<span><strong>{{ zuoshou }}</strong></span></td>
            <td>跌停：<span :style=cc(dieting)>{{ dieting }}</span></td>
            <td>成交额：<span>{{ chengjiaoe }}</span></td>
          </tr>
          <tr class="separateBottom">
            <td>量比：<span class="stock-rise">{{ liangbi }}</span></td>
            <td>换手：<span>{{ huanshou }}</span></td>
            <td>市盈率(动)：<span>{{ shiyinglvdong }}</span></td>
            <td>市盈率(TTM)：<span>{{ shiyinglvttm }}</span></td>
          </tr>
          <tr>
            <td>每股净资产：<span>{{ meigujinzichan }}</span></td>
            <td>振幅：<span>{{ zhengfu }}</span></td>
            <td>市盈率(静)：<span>{{ shiyinglvjing }}</span></td>
            <td>市净率：<span>{{ shijinglv }}</span></td>
          </tr>
          <tr>
            <td>每股收益：<span>{{ meigushouyi }}</span></td>
            <td>股息(TTM)：<span>{{ guxi }}</span></td>
            <td>总股本：<span>{{ zongguben }}</span></td>
            <td>总市值：<span>{{ zongshizhi }}</span></td>
          </tr>
          <tr>
            <td>股息率(TTM)：<span>{{ guxilv }}</span></td>
            <td>流通股：<span>{{ liutonggu }}</span></td>
            <td>流通值：<span>{{ liutongzhi }}</span></td>
            <td>货币单位：<span>CNY</span></td>
          </tr>
          </tbody>
        </table>
        <div class="pic">
                <div class="ppp">
                    <span>分时K线图</span>
                    <img :src="geturl(stockid)" target="_blank" />
                    
                </div>
                <div class="ppp">
                    <span>日K线图</span>
                    <img :src="geturl2(stockid)" target="_blank" />
                 </div>
                <div class="ppp">
                    <span>周K线图</span>
                    <img :src="geturl3(stockid)" target="_blank" />
                    <!-- <img :src="geturl3(newstockid)" target="_blank" /> -->
                </div>
                <div class="ppp">
                    <span>月K线图</span>
                    <img :src="geturl4(stockid)" target="_blank" />
                </div>
            </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
// import { SingleEntryPlugin } from 'webpack';


export default {
  data() {
    return {
      stockname: '没你好果汁吃',
      stockid: '这不是你的股票',
      stockprice: '0.00',
      zhangdiefudu: '0.00',
      zhangdiebili: '0.00%',
      dealingstatus: "无法交易",
      nowTime: "",
      colorcurrent: 'choosecolor(stockprice)',
      zuigao: '0.00',
      jinkai: '0.00',
      zhangting: '0.00',
      chengjiaoliang: '0.00万手',
      zuidi: "0.00",
      zuoshou: '0.00',
      dieting: '0.00',
      chengjiaoe: '0.00亿',
      liangbi: '0.00',
      huanshou: '0.00%',
      shiyinglvdong: '0.00',
      shiyinglvttm: '0.00',
      zhengfu: '0.00%',
      shiyinglvjing: '0.00',
      shijinglv: '0.00',
      meigushouyi: '0.00',
      guxi: '0.00',
      zongguben: '0.00亿',
      zongshizhi: "0.00亿",
      meigujinzichan: '0.00',
      guxilv: "0.00%",
      liutonggu: '0.00亿',
      liutongzhi: '0.00亿',
      kw:'',
    }
  },
  mounted() {
    this.nowTimes(); 
  },
  beforeDestroy() {
    this.clear();
  },
  methods: {
    refresh_page(){
      this.$router.go(0)
    },
    geturl(img){
      var url="http://image.sinajs.cn/newchart/min/n/"+img+".gif";
      return url;
    },
    geturl2(img){
      var url="http://image.sinajs.cn/newchart/daily/n/"+img+".gif";
      return url;
    },
    geturl3(img){
      var url="http://image.sinajs.cn/newchart/weekly/n/"+img+".gif";
      return url;
    },
    geturl4(img){
      var url="http://image.sinajs.cn/newchart/monthly/n/"+img+".gif";
      return url;
    },
    //传输数据到后端
    get_stockinfo:function(event){
      let config = {
        // 关于comnteng-type，看https://www.jb51.net/article/145209.htm
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
      let data =  {'stockcode':this.kw}
      // axios方式发送请求
      
      this.$axios.post(
        'http://127.0.0.1:8000/api/stockinfo/', data, config).then(response => {
        console.log(response.data)
        if(response.data.error_code=='1')
        {
          // alert("我滴任务完成啦");
          // this.stockid=response.data.stockid
          this.stockname=response.data.stockname
          this.stockprice=response.data.stockprice
          this.zhangdiefudu=response.data.price_change
          this.zhangdiebili=response.data.percentage
          this.zuigao=response.data.high
          this.jinkai=response.data.today
          this.zhangting=response.data.highest
          this.chengjiaoliang=response.data.volume
          this.zuidi=response.data.low
          this.zuoshou=response.data.yesterday
          this.dieting=response.data.lowest
          this.chengjiaoe=response.data.volume_price
          this.liangbi=response.data.liangbi
          this.huanshou=response.data.huanshou
          this.shiyinglvdong=response.data.shiyinglvdong
          this.shiyinglvjing=response.data.shiyinglvjing
          this.shiyinglvttm=response.data.shiyinglvttm
          this.shijinglv=response.data.shijinglv
          this.meigujinzichan=response.data.meigujinzichan
          this.meigushouyi=response.data.meigushouyi
          this.guxi=response.data.guxi
          this.zongguben=response.data.zongguben
          this.zongshizhi=response.data.zongshizhi
          this.meigujinzichan=response.data.meigujinzichan
          this.guxilv=response.data.guxilv
          this.liutongu=response.data.liutonggu
          this.liutongzhi=response.data.liutongzhi
          this.zhenfu=response.data.zhenfu
          this.dealingstatus=response.data.dealingstatus
          this.stockid=response.data.type
          
          
        }
        else
        {
          alert("找不到这个股票");
        }
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      });

    },
    cc(color){
      if(color>this.zuoshou)
        return"color:red"
      else return "color:green"
    },
    choosecolor(currentcolor) {
      if (currentcolor > this.zuoshou)
        return "red";
      else return "green"
    },
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
      let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
      let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
      let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
      let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
      this.nowTime = year + "." + month + "." + date + "  " + "星期" + '日一二三四五六'.charAt(new Date().getDay()) + " " + hh + ":" + mm + ':' + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear()
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null;
      clearInterval(this.timer);
      this.timer = null;
    }
  }
}
</script>

<style scoped>
.building{
  background:url("../assets/bj.jpg") no-repeat;
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
  top: 0;
  border-width: 0 0 1px;
}

.stock-name {
  line-height: 28px;
  font-size: 35px;
  color: black;
  text-align: center;
  margin-bottom: 5px;
  font-family: PingFangSC-Semibold;
}

.stock-id {
  margin-top: 20px;
  line-height: 28px;
  font-size: 20px;
  color: darkslategrey;
  text-align: center;
  margin-bottom: 5px;
  font-family: PingFangSC-Semibold;
}

.container-sm {
  padding-top: 30px;
}

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

.stock-info {
  overflow: hidden;
  zoom: 1;
}

.stock-price {
  overflow: hidden;
  zoom: 1;
}

.stock-current {
  font-size: 30px;
  line-height: 40px;
  display:inline;
}

.stock-change {
  padding-top: 5px;
  margin-left: 8px;
  margin-right: 10px;
  font-size: 20px;
}

.stock-time {
  text-align: center;
  margin-top: 1px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC, serif;
  font-weight: 400;
  color: #909499;
  line-height: 14px;
}

.quote-market-status {
  padding-top: 2px;
  padding-bottom: 4px;
}

.quote-info {
  color: #33353c;
  margin-top: 5px;
  width: 100%;
  font-size:20px;
}

.xiangxishuju {
  color: cornflowerblue;
  font-size: 25px;
}

.red {
  color: red;
}

.green {
  color: green;
}
.pic {
    margin-top: 30px;
    height:400px;
    width:100%;
}

.ppp {
    height: 350px;
    width:50%;
    float:left;
}

.ppp img {
    height: 300px;
    width:100%;
    float:left;
}

.ppp span {
    height:50px;
    font-size: large;
}
</style>
